<template>
  <a-input-number :min="option.minValue" 
    :max="option.maxValue" :precision="0" 
    :defaultValue="option.defaultValue" 
    @change="handleChange" 
    ref="integer"></a-input-number>
</template>

<script>
import debounce from 'lodash/debounce'
export default {
  name: 'Integer',
  props: {
    option: {
      type: Object,
      required: false,
      default: () => {
        return {
          maxValue: 100,
          minValue: 0,
          defaultValue: 0
        };
      }
    },
    defaultHelp: {
      type: String,
      required: false,
      default: () => {
        return '';
      }
    }
  },
  methods: {
    handleChange(value) {
      this.setValue(this, value);
    },
    setValue: debounce((self, value) => {
      if (value > self.option.maxValue || value < self.option.minValue) {
        self.$refs.integer.blur();
      } else {
        self.$emit('change', value);
      }
    }, 500)
  }
}
</script>

<style scoped>

</style>